<template>
    <div class="container">
        <p class="title">销售额趋势图</p>
        <div class="charts" ref="charts">地图</div>
    </div>
</template>

<script setup lang="ts" name="CenterBottom">
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';

const charts = ref()
onMounted(() => {
    const myCharts = echarts.init(charts.value)
    myCharts.setOption({
        xAxis: { type: 'category', splitLine: { show: false }, boundaryGap: false, data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] },
        yAxis: { splitLine: { show: false }, axisLine: { show: true }, axisTick: { show: true } },
        series: {
            type: 'line', data: [120, 240, 900, 1200, 321, 890, 1600], smooth: true, areaStyle: {
                color: {
                    type: 'linear',
                    x: 0, y: 0, x2: 0, y2: 1,
                    colorStops: [{ offset: 0, color: '#E92686' }, { offset: 1, color: '#5470C6' }],
                }
            },
        },
        grid: { left: 40, right: 10, bottom: 20, top: 10 }
    })
})
</script>

<style scoped lang="scss">
.container {
    padding: 20px;

    .title {
        font-size: 20px;
        margin-left: 20px;
    }

    .charts {
        margin-top: 20px;
        height: calc(100% - 40px);
    }
}
</style>